<template>
<div class="choose-userlist">
    <!-- <el-button class="mar-b-20" type="primary" size="mini" @click="toggle">指定商品</el-button> -->
    <!-- @close="output" -->
    <el-dialog custom-class="wlm-form-dialog dialog-table" :visible.sync="dialogTableVisible" @close="clearData" width="45%">
        <div class="wlm-dialog-fixheader">
            <span class="wlm-dialog-inlenr">选择优惠券</span>
        </div>
        <!-- <el-scrollbar> -->
        <div class="wlm-table-content">
            <div class="wlm-dialog-main">
                <div class="flex-row">
                    <el-scrollbar>
                        <div class="goods-menu">
                            <el-tree :data="menuData" :props="defaultProps" accordion @node-click="handleNodeClick">
                            </el-tree>
                        </div>
                    </el-scrollbar>
                    <el-scrollbar style="width:100%;height: 520px;max-height: 520px;">
                        <div class="goods-list-box">
                            <div class="goods-serch">
                                <el-input v-model="tableFormatData.userTable.files.name" placeholder="搜索优惠券名称"></el-input><i
                    class="el-icon-search pos-col-center"
                    @click="filesSerch"
                  ></i>
                            </div>
                            <el-table ref="multipleTable" :data="tableFormatData.userTable.tableData" @select-all="selectAll" @select="selectChange" style="width: 100%">
                                <!-- <el-table-column :selectable='hasDisabled' type="selection" width="30">
                                </el-table-column> -->
                                
                                <el-table-column  type="selection" width="30">
                                </el-table-column>
                                <el-table-column prop="date" label="优惠券名称" >
                                    <template slot-scope="scope">
                                        <span>{{scope.row.name}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="date" label="满足条件" >
                                    <template slot-scope="scope">
                                        <el-popover trigger="hover" placement="top">
                                            <p>
                                                <couponRender>
                                                    <template slot="title" v-if="scope.row.coupon_type">
                                                        {{`${scope.row.rule === 0 ? `${coupon_price[`${scope.row.coupon_type}`]['textRule']}${scope.row.rule_min_money}元`:''} ${coupon_price[`${scope.row.coupon_type}`]['textPrev']}`}}
                                                    </template>
                                                    <template slot="price">
                                                        {{scope.row.coupon_type === 40 ? `${scope.row.min} - ${scope.row.max}` : scope.row.coupon_type === 20 ? scope.row.discount : scope.row.reduce_price}}
                                                    </template>
                                                    <template slot="tail" v-if="scope.row.coupon_type">
                                                        {{coupon_price[`${scope.row.coupon_type}`]['textLast']}}
                                                    </template>
                                                </couponRender>
                                            </p>
                                            <div slot="reference" class="wlm-table-wrapper">
                                                <couponRender>
                                                    <template slot="title" v-if="scope.row.coupon_type">
                                                        {{`${scope.row.rule === 0 ? `${coupon_price[`${scope.row.coupon_type}`]['textRule']}${scope.row.rule_min_money}元`:''} ${coupon_price[`${scope.row.coupon_type}`]['textPrev']}`}}
                                                    </template>
                                                    <template slot="price">
                                                        {{scope.row.coupon_type === 40 ? `${scope.row.min} - ${scope.row.max}` : scope.row.coupon_type === 20 ? scope.row.discount : scope.row.reduce_price}}
                                                    </template>
                                                    <template slot="tail" v-if="scope.row.coupon_type">
                                                        {{coupon_price[`${scope.row.coupon_type}`]['textLast']}}
                                                    </template>
                                                </couponRender>
                                            </div>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="date" label="总数/已领取" >
                                    <template slot-scope="scope">
                                        <span>{{`${scope.row.total_num}/${scope.row.receive_num}`}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-scrollbar>
                </div>

            </div>
        </div>
        <!-- </el-scrollbar> -->
        <div class="pagination-content flex-row flex-justify-b flex-align-c">
            <el-row class="pagination-btns">
            </el-row>
            <el-pagination style="margin-top:20px;margin-bottom:20px;margin-right: 25px;" :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData.length > 0 ? tableFormatData.userTable.pagination.total : 0">
            </el-pagination>
        </div>
        <div class="wlm-dialog-fixfooter">
            <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            size="small"
            @click="toggle"
          >取 消</el-button>
          <el-button
            size="small"
            type="primary"
            @click="saveChoose"
          >确 定</el-button>
        </span>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
  couponList
} from '@/api/application'
import mixins from '@/mixins/mixins'
import defaultConfig from './utils/config'
import {
  tooggleArray
} from '@/utils/index'
export default {
  mixins: [defaultConfig.mixins, mixins.getters('Table')],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  components: {
    couponRender: {
      template: '<span><slot name="title"></slot><span class="text-danger"><slot name="price"></slot></span><slot name="tail"></slot></span>'
    }
  },
  watch: {
    'config.get_limit_type': {
      handler(newData, oldData) {
        console.log(newData, oldData)
        if (typeof newData === 'number') {
          this.$nextTick(() => {
            this.tableFormatData.userTable.files.get_limit_type = newData
          })
        }
      },
      immediate: true,
      deep: false
    }
  },
  data() {
    return {
      coupon_price: {
        10: {
          textRule: '满',
          textPrev: '减免',
          textLast: '元'
        },
        20: {
          textRule: '满',
          textPrev: '打',
          textLast: '折'
        },
        30: {
          textRule: '满',
          textPrev: '减免',
          textLast: '元'
        },
        40: {
          textRule: '满',
          textPrev: '范围内随机',
          textLast: '元'
        }
      },
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      displayData: [],
      menuData: [{
        couponType: 0,
        name: '全部',
        child: []
      }, {
        couponType: 10,
        name: '满减券',
        child: []
      }, {
        couponType: 20,
        name: '折扣券',
        child: []
      }, {
        couponType: 30,
        name: '运费券',
        child: []
      }, {
        couponType: 40,
        name: '随机券',
        child: []
      }],
      currentRow: [],
      closable: true,
      dialogTableVisible: false,
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: couponList
          },
          tableData: [],
          files: {
            get_limit_type: 0,
            couponType: 0,
            name: '',
            ids: [],
            checkall: '0',
            category_id: '',
            couponStatus: '1'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  computed: {
  },
  methods: {
    hasDisabled(item, index) {
      let hasDisabled = false
      const disabled = this.config.disabled
      if (Array.isArray(disabled) && disabled.length > 0) {
        disabled.map(lableItem => {
          const hasValue = lableItem.reverse ? item[`${lableItem.label}`] !== lableItem.value : item[`${lableItem.label}`] === lableItem.value
          if (hasValue) {
            hasDisabled = true
          }
          return !hasValue
        })
      }
      return !hasDisabled
    },
    // deleteTable(scope) {
    //   this.displayData.splice(scope.$index, 1)
    //   this.currentRow.splice(scope.$index, 1)
    // },
    // 组件内table删除取消列表勾选（废弃）
    toggleSelection(rows, scope) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
      this.displayData.splice(scope.$index, 1)
      this.currentRow.splice(scope.$index, 1)
    },
    selectChange(val, row) {
      console.log(row.coupon_id, 'row.coupon_id')
      if (this.currentRow.includes(row.coupon_id)) {
        const newIndex = this.displayData.findIndex((displayItem) => {
          return displayItem.coupon_id === row.coupon_id
        })
        if (newIndex !== -1) {
          this.displayData.splice(newIndex, 1)
        }
      } else {
        console.log('display推入数据')
        this.displayData.push(row)
      }
      this.currentRow = tooggleArray(this.currentRow, row.coupon_id)
    },
    selectAll(val) {
      console.log(val)
      if (val.length > 0) {
        val.map((item, index) => {
          if (!this.currentRow.includes(item.coupon_id)) {
            this.currentRow.push(item.coupon_id)
            this.displayData.push(item)
          }
        })
      } else {
        this.displayData = []
        this.currentRow = []
      }
      console.log(this.currentRow, 'currentRow')
    },
    toggle() {
      this.dialogTableVisible = !this.dialogTableVisible
    },
    saveChoose() {
      this.$refs.multipleTable.clearSelection()
      this.toggle()
      this.output()
      this.currentRow = []
    },
    handleNodeClick(data) {
      this.tableFormatData.userTable.files.couponType = data.couponType
      this.filesSerch()
    },
    clearData() {
      console.log(this.currentRow, 'c1')
      this.currentRow = []
      this.displayData = []
      console.log(this.currentRow, 'c2')
    },
    output() {
      if (Object.prototype.toString.call(this.changeEvt) === '[object Function]') {
        this.changeEvt({ currentRow: this.currentRow, displayData: this.displayData, key: 'ChooseCoupon' }, this.updateConfig.bindKey)
      }
      // this.displayData = this.currentRow
      console.log(this.displayData)
    }
  }
}
</script>

<style lang="scss" scoped>
.choose-userlist {
    font-size: 14px;
    margin-bottom: 10px;

    /deep/ .pagination-content .el-input {
        width: 100px;
    }

    .tag-list .el-tag {
        width: auto;
        white-space: nowrap;
        text-overflow: ellipsis;

        &+.el-tag {
            margin-left: 5px;
        }
    }

    .wlm-dialog-main {
        max-height: 520px;
    }

    /deep/ .is-horizontal {
        display: none;
    }

    /deep/ .el-scrollbar__view {
        font-size: 16px;
    }

    .goods-menu {
        width: 200px;
        max-height: 520px;
        padding-bottom: 12px;
        overflow-x: hidden;

        /deep/ .el-tree-node__content {
            .el-tree-node__expand-icon:not(.is-leaf) {
                color: #409eff !important;
            }

            &:hover {
                color: #fff;
                background: #409eff !important;

                .el-tree-node__expand-icon:not(.is-leaf) {
                    color: #fff !important;
                }
            }
        }

        /deep/ .el-tree-node:focus>.el-tree-node__content {
            color: #fff;
            background: #409eff !important;

            .el-tree-node__expand-icon:not(.is-leaf) {
                color: #fff !important;
            }
        }

        /deep/ .el-tree-node.is-current:not(.is-expanded) {
            color: #fff;
            background: #409eff !important;

            .el-tree-node__expand-icon:not(.is-leaf) {
                color: #fff !important;
            }
        }

        /deep/ .el-tree-node.is-current.is-expanded>.el-tree-node__content {
            color: #fff;
            background: #409eff !important;

            .el-tree-node__expand-icon:not(.is-leaf) {
                color: #fff !important;
            }
        }
    }

    .goods-list-box {
        width: 100%;
        min-height: 520px;
        padding: 20px 20px;
        margin-top: -20px;
        border-left: 1px solid #f2f2f2;

        .no-tabledata {
            text-align: center;

            svg {
                font-size: 20em;
            }
        }

        /deep/ .goods-serch {
            position: relative;
            margin-bottom: 20px;
            text-align: left;
            .el-input__inner {
                width: 200px;
                border: none;
                background: rgb(237, 237, 237);
                border-radius: 20px;
                font-size: 12px;
            }

            i {
                cursor: pointer;
                left: 200px;
                margin-left: -35px;
                font-size: 20px;
            }
        }

        .goods-list {
            width: 50%;

            &:not(:nth-last-child(1)) {
                padding-bottom: 20px;
            }

            .goods-item {
                border: 1px solid #d8d1d1;
                margin-right: 20px;
                padding: 8px 10px;
                border-radius: 5px;

                .img-center {
                    border-radius: 10px;
                    width: 90px;
                    height: 80px;
                }

                .scale-grow {
                    padding: 0 5px;
                }

                .ellipsis {
                    width: 100%;
                    font-size: 13px;
                    text-align: left;
                    margin-bottom: 20px;

                    &+p.flex-row {
                        width: 100%;
                    }
                }

                .text-danger+.el-button {
                    width: 80px;
                    background: transparent;

                    &:not(.is-not) {
                        color: #409eff;
                    }

                    &.is-not {
                        border-color: transparent;
                        color: #fff !important;
                        background: rgb(203, 203, 203) !important;
                    }

                    &.is-active {
                        border-color: transparent;
                        color: #fff !important;
                        background: #409eff !important;
                    }

                    &.is-disabled {
                        border-color: transparent;
                        color: #fff !important;
                        background: #c0c4cc !important;
                    }
                }
            }
        }
    }
}
</style>
